@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
}

:root {
  /* fonts */
  --text-single-100-regular: Inter;

  /* font sizes */
  --text-single-100-regular-size: 16px;
  --special-headings-display-2-size: 36px;
  --font-size-lg: 18px;

  /* Colors */
  --primary-colors-color-1: #090f1d;
  --color-primary: #087443;
  --color-text-disable: #bfbfbf;
  --color-primary-light: #D3F8DF;
  --color-primary-light-hover: #EAFAEF;
  --secondary-color-yellow: #DCDB91;
  --secondary-color-orange: #FBAA74;
  --color-positive: #099250;
  --color-positive-hover: #2EA26A;
  --color-negative: #EC1943;
  --color-negative-hover: #EC3C5F;
  --color-warning: #FFBB58;
  --color-text-primary: #2B2B2B;
  --color-text-secondary: #8F8F8F;
  --color-text-disable: #BFBFBF;
  --color-divider: #E4E4E4;
  --color-border: #E4E4E4;
  --color-table-header: #E4E4E4;
  --color-gray-hover: #FAFAFA;
  --color-background: #FFFFFF;
  --color-msg-background-bot: #F2F4F7;
  --color-table-gap: #E4E4E4;
  --color-clear-button-hover: #F8F8F8;
  --color-invert-text: #FFFFFF;
  --color-item-background: #FAFAFA;
  --color-menu-background: #f3f8f6;
  /* Gaps */
  --gap-base: 16px;
  --gap-9xs: 4px;
  --gap-xl: 20px;
  --gap-5xs: 8px;
  --gap-7xs: 6px;

  /* Paddings */
  --padding-3xs: 10px;
  --padding-base: 16px;
  --padding-2xs: 11px;
  --padding-5xl: 24px;
  --padding-5xs: 8px;

  /* Border radiuses */
  --br-7xs: 6px;
  --br-5xs: 8px;
}

#root {
  width: 100vw;
  height: 100vh;
  // max-width: 1280px;
  display: flex;

  .ant-layout {
    background-color: var(--color-item-background);

    section {
      flex-direction: row !important;

      .ant-layout {
        flex-direction: column !important;
        background-color: var(--color-item-background);

      }
    }
  }
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: Inter !important;
}

.ant-modal-wrap.ant-modal-centered {
  overflow: auto !important;
  height: 100vh;
}

.tk-h1 {
  position: relative;
  font-size: 36px;
  font-family: Inter;
  color: #2b2b2b;
  text-align: left;
  font-weight: bold;
}

.tk-h2 {
  position: relative;
  font-size: 24px;
  font-weight: 600;
  font-family: Inter;
  color: #2b2b2b;
  text-align: left;
}

.tk-h3 {
  position: relative;
  font-size: 18px;
  font-weight: 600;
  font-family: Inter;
  color: #2b2b2b;
  text-align: left;
}

.tk-h4 {
  position: relative;
  font-size: 18px;
  font-weight: 500;
  font-family: Inter;
  color: #2b2b2b;
  text-align: left;
}

.tk-h5 {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  font-family: Inter;
  color: #2b2b2b;
  text-align: left;
}

.tk-h6 {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  font-family: Inter;
  color: #2b2b2b;
  text-align: left;
}

.tk-p {
  position: relative;
  font-size: 14px;
  font-family: Inter;
  color: #2b2b2b;
  font-weight: 400;
  text-align: left;
}

.tk-desc {
  position: relative;
  font-size: 14px;
  font-family: Inter;
  color: #777;
  text-align: left;
}

.tk-small-desc {
  position: relative;
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
  font-family: Inter;
  text-align: left;
}

.tk-input {
  position: relative;
  font-size: 14px;
  font-family: Inter;
  color: var(--color-text-disable);
  text-align: left;
}

.ant-input:hover {
  border: 1px solid var(--color-positive);
}

.ant-input:focus {
  border-color: var(--color-positive);
  box-shadow: none;
}

.ant-input-affix-wrapper-focused {
  border-color: var(--color-positive) !important;
}

.ant-input-number:hover {
  border-color: var(--color-positive) !important;
}


.ant-input-number:focus {
  border-color: var(--color-positive) !important;
}

.ant-input-number-focused {
  border-color: var(--color-positive) !important;
}

.ant-input {
  border: 1px solid #e4e4e4
}

.ant-select:hover {
  .ant-select-selector {
    border: 1px solid var(--color-positive) !important;
  }
}

.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active {
  border: 1px solid var(--color-positive) !important;
  box-shadow: none !important;
}

.ant-spin-dot-item {
  background-color: var(--color-positive) !important;
}

.ant-spin-text {
  color: var(--color-positive) !important;
}

.next-button {
  background-color: var(--color-positive);
  color: #fff;
  cursor: pointer;
}

.next-button:hover {
  color: #fff !important;
  cursor: pointer;
  background-color: var(--color-positive-hover) !important;
  border: 1px solid transparent !important;
  box-shadow: none;
}

.delete-button {
  background-color: var(--color-negative);
  color: #fff;
}

.delete-button:hover {
  color: #fff !important;
  cursor: pointer;
  background-color: var(--color-negative-hover) !important;
  border: 1px solid transparent !important;
}

.cancel-button {
  border: 1px solid #e4e4e4 !important;
  color: #2b2b2b !important;
  background-color: white;
  cursor: pointer;

  div {
    display: none;
  }
}

.ant-btn-default:hover {
  background-color: inherit;
}

.cancel-button:hover {
  border: 1px solid #e4e4e4 !important;
  color: #2b2b2b !important;
  background-color: var(--color-clear-button-hover) !important;
}

.icon-copy {
  cursor: pointer;
  margin-left: 5px;
  flex-shrink: 0;
}

.ant-space .ant-space-item .table-edit-icon {
  border: 1px solid #e4e4e4;
  padding: 7px;
  height: 34px !important;
  width: 34px !important;
  position: relative;
  border-radius: 8px;
  cursor: pointer;
 
}

.img-text {
  display: flex;
  align-items: center;

  svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;

  }

  .a {
    margin-left: 5px
  }
}

.table-tooltip {
  .ant-tooltip-content {
    margin-top: 10px;
  }
}

.custom-toast-container {
  z-index: 99999 !important;
}

.subscription-toast {
  width: 382px;
}

#subscription-toast {
  background-color: #FF9700;
  width: 382px;
  padding: 12px;
}



.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
  border: 1px solid var(--color-positive) !important;

  .ant-input:hover {
    border: none !important;
  }
}
.more-icon {
  path {
    stroke: var(--color-text-primary);

  }
}
.ant-modal-content {
  padding: 0 !important;

  .ant-modal-close {
    top: 9px;
    height: auto;
  }

  .ant-modal-header {
    padding: 10px 24px;
    border-bottom: 1px solid var(--color-divider);
    display: flex;
    align-items: center;
    margin: 0;

    .ant-modal-title {
      display: flex;
      align-items: center;
      font-weight: 500 !important;
    }

    .title {
      font-size: 24px;
      line-height: 1;
      padding-bottom: 0;
    }
  }

  .ant-modal-body {
    border-bottom: 1px solid #eee;
    padding: 24px 20px;
    background-color: var(--color-item-background);
    height: auto;
  }

  .ant-modal-footer {
    height: 70px;
    display: flex;
    margin: 0;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20px;
    padding-left: 20px;
  }
}

.modal-inner-table {
  height: 720px !important;

  .ant-modal-content {
    height: 720px !important;

    .ant-modal-body {
      height: 605px;
      overflow: hidden;
      background-color: var(--color-item-background);

      .modal-table {
        height: 570px;

        .table-border {
          height: 500px;
        }

        .ant-table-wrapper {
          min-height: 400px;

          .ant-spin-nested-loading {
            min-height: 400px;

            .ant-spin-container {
              min-height: 400px;

              .ant-table {
                min-height: 400px;

                .ant-table-container {
                  min-height: 400px;

                  .ant-table-body {
                    min-height: 300px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.footer-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .select-record {
    color: var(--color-positive);
    margin-right: 10px;
  }
}

.ant-radio-wrapper:hover .ant-radio-inner {
  border-color: var(--color-positive) !important;
}

.ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
  border-color: var(--color-positive) !important;
  background-color: var(--color-positive) !important;
}


.ant-table-wrapper .ant-table-tbody .ant-table-row.ant-table-row-selected>.ant-table-cell {
  background-color: var(--color-menu-background);
}

.ant-table-wrapper .ant-table-tbody .ant-table-row.ant-table-row-selected>.ant-table-cell-row-hover {
  background-color: var(--color-menu-background);
}

.table-edit-icon1 {
  position: relative;
  border: 1px solid var(--color-border);
  padding: 7px;
  display: flex;
  position: relative;
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
}

.table-edit-icon1:hover {
  background-color: #f5f5f5;
}

.href {
  color:var(--color-positive-hover);
}

.href:hover {
  color: var(--color-positive-hover);
}

.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background-color: var(--color-menu-background);
  color: var(--color-primary);
}

.table-text {
  margin: 0 !important;
  line-height: 17px;
}

.model-types {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: space-between;
  padding: 4px 24px 0px 0px;
  .chat_completion {
    background-color: #eff6ff;
    color: #5291f7;
    svg {
      path {
        stroke: #5291f7;
      }
    }
  }
 .rerank {
    background-color:#10B9811A;
    color: #10B981;
    svg {
      path {
        stroke: #10B981;
      }
    }
  }
  .text_embedding {
    background-color: #fff7ed;
    color: #f97316;
    svg {
      path {
        stroke: #f97316;
      }
    }
  }

  .wildcard {
    background-color: #eef2ff;
    color: #6366f1;

    svg {
      path {
        stroke: #6366f1;
      }

      // margin-right: 3px;

    }
  }

  .chat_completion,
  .text_embedding,
  .rerank,
  .wildcard {
    border-radius: 8px;
    padding: 0px 8px;
    display: flex;
    flex-wrap: wrap;
    // margin-right: 12px;
    align-items: center;
    gap:3px;
    // width: 133px;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
  }
}

.model-types-group {
  display: flex;

}

.ready {
  background-color: #F2FFFA;
  color: var(--color-positive);
  min-width: 38px;
  box-sizing: content-box;
  max-width: 38px;
}

.active {
  background-color: #F2FFFA;
  color: var(--color-positive);
  min-width: 36px;
  box-sizing: content-box;
  max-width: 38px;
}

.inviting {
  box-sizing: content-box;
  background-color: #FBFDE8;
  width: 42px;
  color: var(--color-warning);
}

.partial {
  background-color: #FBFDE8;
  width: 38px;
  box-sizing: content-box;
  color: var(--color-warning);
}

.creating {
  box-sizing: content-box;

  background-color: #FBFDE8;
  width: 50px;
  color: var(--color-warning);
}

.rejected {
  box-sizing: content-box;
  background-color: #FFF1F1;
  width: 50px;
  color: var(--color-negative);
}

.error {
  box-sizing: content-box;
  background-color: #FFF1F1;
  width: 29px;
  color: var(--color-negative);
}

.paid {
  background-color: #F2FFFA;
  color: var(--color-positive);
  min-width: 25px;
  box-sizing: content-box;
  max-width: 25px;
}

.unpaid {
  background-color: #FFF1F1;
  width: 41px;
  box-sizing: content-box;
  color: var(--color-negative);
}

.ready,
.partial,
.creating,
.error,
.paid,
.unpaid,
.rejected,
.active,
.inviting {
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 0px 8px;
  font-size: 14px;
  height: 28px;
  line-height: 20px;
}

.file_container {
  display: flex;
  padding: 24px;
  gap: 12px;
  flex-wrap: wrap;
  height: 100%;
  margin-bottom: 3px;
  /* max-height: 60px; */
  /* overflow-y: auto; */
}

.file_main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* max-width: 170px; */
  width: 100%;
  height: 125px;
  background: var(--color-background);
  /* padding: 8px 15px 8px 3px; */
  border-radius: 7px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--color-divider);
}

.file_icons {
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--color-divider);
}

.image_file {
  width: 20.36px;
  height: 28px;
}

.file_name {
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  margin-bottom: 10px;
}

.file_kb {
  font-size: 12px;
  color: #777777;
  font-weight: 400;
  line-height: 14px;
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.loading-icon {
  color: #ffbb58;

  svg {
    width: 18px;
    height: 18px;
  }

  margin-right: 6px;
}

.loading-icon {
  width: 18px;
  height: 18px;

  svg {
    width: 18px;
    height: 18px;
  }

  // margin-right: 6px;
  animation: rotate360 1s linear infinite;
}

.ant-checkbox:hover {
  .ant-checkbox-inner {
    background-color: transparent !important;
    border: 1px solid var(--color-positive) !important;
    outline: none !important;
    box-shadow: none;
  }
}

.ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--color-positive);
  border-color: var(--color-positive);
}

.ant-checkbox-checked:hover {
  .ant-checkbox-inner {
    background-color: var(--color-positive) !important;
    border: 1px solid var(--color-positive) !important;
  }

  .ant-checkbox-inner::after {
    visibility: visible !important;
  }
}

.ant-checkbox-wrapper:hover {
  .ant-checkbox-inner {
    border: 1px solid var(--color-positive) !important;
    background-color: var(--color-positive) !important;

  }
}
.anim-loading {
       position: absolute;     
       top: calc(50% - 10px);  
       left: calc(50% - 10px); 
       z-index: 3;    
       color: white     
}
@keyframes scaleAndRotate {
  0%, 100% {
    transform: scale(1.5) rotate(0deg);
  }
  100% {
    transform: scale(1.5) rotate(360deg);
  }
}
.anim-loading {
  width: 18px;
  height: 18px;
  svg {
      width: 18px;
      height: 18px;
  }
 animation: scaleAndRotate 1s infinite linear;
}
.overlayStyle {
  .ant-tooltip-content {
    .ant-tooltip-inner {
      background: #777 !important;
      color: white !important;
    }

  }
}
.markdown-body pre code {
  width: 97%;
  overflow: auto; 
}
 .markdown-body pre code::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.markdown-body pre code::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


.markdown-body pre code::-webkit-scrollbar-thumb {
  background: #8F8F8F;
  border-radius: 4px;
}

.markdown-body pre code::-webkit-scrollbar-thumb:hover {
  background: #555;
}